<template>
<div id="users">
    <el-table :data="tableData">
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="phone" label="手机">
        </el-table-column>
        <el-table-column prop="" label="操作">
            <div slot-scope="{row}">
                <el-button-group>
                    <el-button type="primary" round size="mini" @click="editUser(row)">编辑</el-button>
                    <el-button type="danger" round size="mini" @click="delUser(row.id)">删除</el-button>
                    <el-button type="info" round size="mini" @click="rePw(row.id)">重置密码</el-button>
                </el-button-group>
            </div>
        </el-table-column>
    </el-table>
    <div style="margin:20px auto;text-align: center;">
        <el-pagination :current-page.sync="currentpage" :page-size="pagesize" :total="total" @current-change="getUserList" background layout="prev,pager,next,total">
        </el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
        <el-form ref="formLogin" label-position="left" :model="formUsersData" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="formUsersData.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="formUsersData.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-input v-model="formUsersData.phone"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="text" @click="dialogVisible=false">取 消</el-button>
            <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusEdit">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        let validUsername = (rule, value, callback) => {
            let regx = /^[a-zA-Z]\w{3,17}$/;
            if (!regx.test(value)) {
                callback(new Error("用户名非法"));
            } else {
                callback();
            }
        };
        let validEmail = (rule, value, callback) => {
            let regx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (!regx.test(value)) {
                callback(new Error('邮箱非法'))
            } else {
                callback()
            }
        }
        let validPhone = (rule, value, callback) => {
            let regx = /^1[34578]\d{9}$/;
            if (!regx.test(value)) {
                callback(new Error('手机号码错误'))
            } else {
                callback()
            }
        }
        let isexistname = (rule, value, callback) => {
            this.$http.get(`/users/isexist?fieldname=username&fieldvalue=${value}`).then(result => {
                if (result.data.error == 1 && value !== this.oldvalue.username) {
                    callback(new Error('用户名已存在'))
                } else {
                    callback()
                }
            })
        }
        let isexistphone = (rule, value, callback) => {
            this.$http.get(`/users/isexist?fieldname=phone&fieldvalue=${value}`).then(result => {
                if (result.data.error === 1 && value !== this.oldvalue.phone) {
                    callback(new Error('手机号码已存在'))
                } else {
                    callback()
                }
            })
        }
        let isexistemail = (rule, value, callback) => {
            this.$http.get(`/users/isexist?fieldname=email&fieldvalue=${value}`).then(result => {
                if (result.data.error === 1 && value !== this.oldvalue.email) {
                    callback(new Error('邮箱已存在'))
                } else {
                    callback()
                }
            })
        }
        return {
            tableData: [],
            total: 0,
            pagesize: 4,
            currentpage: 1,
            formUsersData: {
                username: "",
                email: "",
                phone: ""
            },
            oldvalue: {},
            buttonOkIcon: "",
            buttonDisabled: false,
            dialogTitle: "",
            dialogVisible: false,
            menusList: [],
            rules: {
                username: [{
                        validator: validUsername,
                        trigger: "bulr"
                    },
                    {
                        validator: isexistname,
                        trigger: "bulr"
                    }
                ],
                email: [{
                    validator: validEmail,
                    trigger: 'change'
                }, {
                    validator: isexistemail,
                    trigger: "change"
                }],
                phone: [{
                    validator: validPhone,
                    trigger: 'change'
                },{
                  validator: isexistphone,
                    trigger: "change"
                }],
            }
        };
    },
    created() {
        this.getUserList();
    },
    methods: {
        getUserList() {
            this.$http
                .get(
                    `/users/list?pagesize=${this.pagesize}&currentpage=${
            this.currentpage
          }`
                )
                .then(result => {
                    this.total = result.data.total;
                    this.tableData = result.data.data;
                });
        },
        menusEdit() {
            this.$refs.formLogin.validate(valid => {
                if (!valid) {
                    return;
                }
                this.$http
                    .post("/users/edit", this.$qs.stringify(this.formUsersData))
                    .then(result => {
                        this.dialogVisible = false;
                        this.getUserList();
                    });
            });
        },
        editUser(row) {
            this.dialogVisible = true;
            this.dialogTitle = "编辑";
            this.formUsersData.username = row.username;
            this.formUsersData.phone = row.phone;
            this.formUsersData.email = row.email;
            this.$set(this.formUsersData, "id", row.id);
            this.oldvalue = row;
        },
        deleteUser(id) {
            this.$http.get(`/users/delete?id=${id}`).then(result => {
                this.getUserList();
            });
        },
        delUser(id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.deleteUser(id);
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        repw(id) {
            this.$http.get(`/users/resetpassword?id=${id}`).then(result => {
                this.getUserList();
            })
        },
        rePw(id) {
            this.$confirm("此操作将把您的密码重置为123123", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.repw(id);
                    this.$message({
                        type: "success",
                        message: "密码重置成功!"
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消密码重置"
                    });
                });
        },

    }
};
</script>

<style>

</style>
